<template>
 <div class="reg-container pull-height">
   <div v-if="show">
    <el-form class="reg-form" status-icon :rules="backRules" ref="backForm" :model="backForm" label-width="0">
     <el-form-item >
         <h4 class="reg-title">找回密码</h4>
    </el-form-item>
    <el-form-item prop="phone">
      <el-input size="small" v-model="backForm.phone" auto-complete="off" placeholder="请输入手机号码">
        <i slot="prefix" class="icon-shouji"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="code">
      <el-input size="small"  v-model="backForm.code" auto-complete="off" placeholder="请输入验证码">
        <template slot="append">
          <span @click="handleSend" class="msg-text" :class="[{display:msgKey}]">{{msgText}}</span>
        </template>
        <i slot="prefix" class="icon-yanzhengma" style="margin-top:10px;"></i>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click.native.prevent="handleReg" class="reg-submit">找回密码</el-button>
       <h4 class="reg-title"> <router-link to="/login">去登录</router-link></h4>
    </el-form-item>
  </el-form>
   </div>
   <div v-if="!show">
       <el-form class="reg-form" :rules="passwordRules" ref="passwordForm" :model="backForm" label-width="0">
     <el-form-item >
         <h4 class="reg-title">找回密码</h4>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="small" v-model="backForm.password"  type="password" auto-complete="off" placeholder="请输入密码">
        <i slot="prefix" class="icon-shouji"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="checkPassword">
      <el-input size="small" v-model="backForm.checkPassword" type="password" auto-complete="off" placeholder="请输入确认密码">
        <i slot="prefix" class="icon-shouji"></i>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click.native.prevent="handleUpdate" class="reg-submit">修改密码</el-button>
       <h4 class="reg-title"> <router-link to="/login">去登录</router-link></h4>
    </el-form-item>
  </el-form>
   </div>
 </div>
</template>

<script>
const MSGINIT = '发送验证码',
  MSGERROR = '验证码发送失败',
  MSGSCUCCESS = '${time}秒后重发',
  MSGTIME = 60
import url from '@/const/apiURL'  
import { isvalidatemobile } from '@/util/validate'
import { mapGetters } from 'vuex'
import request from '@/router/axios'
import md5 from 'js-md5';

export default {
  name: 'codelogin',
  data() {
    const validatePhone = (rule, value, callback) => {
      if (isvalidatemobile(value)[0]) {
        callback(new Error(isvalidatemobile(value)[1]))
      } else {
        callback()
      }
    }
    const validateCode = (rule, value, callback) => {
      if (value.length != 4) {
        callback(new Error('请输入4位数的验证码'))
      } else {
        callback()
      }
    }
    return {
      msgText: MSGINIT,
      msgTime: MSGTIME,
      msgKey: false,
      show:true,
      backForm: {
        regPhone: '',
        code: ''
      },
      backRules: {
        phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        code: [{ required: true, trigger: 'blur', validator: validateCode }]
      },
      passwordRules: {
        password: [{ required: true, trigger: 'blur', message:'密码必填' }],
        checkPassword: [{ required: true, trigger: 'blur', message:'确认密码必填' }]
      }
    }
  },
  created() {},
  mounted() {},
  computed: {
    ...mapGetters(['tagWel'])
  },
  props: [],
  methods: {
    handleSend() {
      if (this.msgKey) return
      if (!this.backForm.phone) {
        this.$message.error('请输入手机号码')
      } else if (!/^1[345789]\d{9}$/.test(this.backForm.phone)) {
        this.$message.error('手机号格式不正确')
      } else {
        const phone = this.backForm.phone
        request({
          url: url.MSG_CODE_URL,
          params: { phone },
          method: 'post'
        }).then(data => {
          if(data){
            this.$message.success('验证码发送成功')
          }
        })
      }
      this.msgText = MSGSCUCCESS.replace('${time}', this.msgTime)
      this.msgKey = true
      const time = setInterval(() => {
        this.msgTime--
        this.msgText = MSGSCUCCESS.replace('${time}', this.msgTime)
        if (this.msgTime == 0) {
          this.msgTime = MSGTIME
          this.msgText = MSGINIT
          this.msgKey = false
          clearInterval(time)
        }
      }, 1000)
    },
    handleUpdate(){
        this.$refs.passwordForm.validate(valid => {
        if (valid) {
          this.backForm.password = md5(this.backForm.password)
          this.backForm.checkPassword = md5(this.backForm.checkPassword)
          this.$store.dispatch('forgetPassword', this.backForm).then(data => {
              if(data){
                this.$message.success('修改成功')
                this.$router.push({ path: '/login' })
              }
          })
        }
      })
    },
    handleReg() {
      this.$refs.backForm.validate(valid => {
        if (valid) {
          this.$store.dispatch('validMsg', this.backForm).then(data => {
              if(data){
                this.show = false
              }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.msg-text {
  display: block;
  width: 60px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}
.msg-text.display {
  color: #ccc;
}

.reg-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}
.reg-container::before {
  z-index: -999;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/img/reg.jpeg");
  background-size: cover;
}

.reg-title {
  margin: 0 0 20px;
  text-align: center;
  color: #409eff;
  letter-spacing: 3px;
}
.reg-submit {
  margin-top: 20px;
  width: 100%;
  background: #3080fe;
  border-radius: 28px;
}
.reg-form {
  margin: 10px 0;
  .el-form-item__content {
    width: 270px;
  }
  .el-form-item {
    margin-bottom: 12px;
  }
  .el-input {
    input {
      text-indent: 5px;
      border-color: #dcdcdc;
      border-radius: 3px;
    }
    .el-input__prefix {
      i {
        padding: 0 5px;
        font-size: 16px !important;
      }
    }
  }
}
.reg-code {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 0 0 10px;
}
.reg-door{
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
</style>

